<style>
@media print {
  ._wz_maintenanceSee {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_maintenanceSee" ref="maintenanceSee">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">
          基本信息
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
            打印
          </Button>
        </td>
      </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">登记编号</td>
        <td style="border-top: 0px;">{{!!formData.maintainRecordNumber?formData.maintainRecordNumber:'--'}}</td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">车牌号</td>
        <td style="border-top: 0px;">{{!!formData.maintainVehiclePlateNo?formData.maintainVehiclePlateNo:'--'}}</td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">车架号</td>
        <td style="border-top: 0px;">{{!!formData.maintainVehicleFrameNo?formData.maintainVehicleFrameNo:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车辆类型</td>
        <td>{{!!formData.maintainVehicleType?formData.maintainVehicleType:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">车辆型号</td>
        <td>{{!!formData.maintainVehicleModel?formData.maintainVehicleModel:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">车辆品牌</td>
        <td>{{!!formData.maintainVehicleBrand?formData.maintainVehicleBrand:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">初登日期</td>
        <td>{{!!formData.maintainVehicleIssueDate?formData.maintainVehicleIssueDate:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">运输企业</td>
        <td colspan="3">{{!!formData.deptName?formData.deptName:'--'}}</td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">维保信息</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车主业户</td>
        <td>{{!!formData.maintainVehicleOwnerName ? formData.maintainVehicleOwnerName:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">联系电话</td>
        <td>{{!!formData.maintainVehicleOwnerPhone ? formData.maintainVehicleOwnerPhone:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">登记人</td>
        <td>{{!!formData.maintainRegistrantName ? formData.maintainRegistrantName:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">维保等级</td>
        <td>
          <template v-if="formData.maintainType == 1">一级维保</template>
          <template v-if="formData.maintainType == 2">二级维保</template>
        </td>
        <td style="text-align: right;font-weight: 600;">协议编号</td>
        <td>{{!!formData.maintainAgreementNo ? formData.maintainAgreementNo:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">维保公里数</td>
        <td>{{!!formData.maintainMileage ? formData.maintainMileage:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">维保周期</td>
        <td>{{!!formData.maintainCycle ? formData.maintainCycle:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">办理日期</td>
        <td>{{!!formData.maintainDate ? formData.maintainDate:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">到期日期</td>
        <td>{{!!formData.maintainExpireDate ? formData.maintainExpireDate:'--'}}</td>

      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">提醒天数</td>
        <td>{{!!formData.maintainRemindDay ? formData.maintainRemindDay:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">提醒日期</td>
        <td>{{!!formData.maintainRemindDate ? formData.maintainRemindDate:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">提醒状态</td>
        <td>
          {{formData.maintainWhetherRemind?'开启':'关闭'}}
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">维保单位</td>
        <td colspan="5">{{!!formData.maintainCompanyName ? formData.maintainCompanyName:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">维保资料</td>
        <td colspan="5">
          <div style="min-height:50px;">
            <div style="width: 195px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in formData.imgEntityList">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item.maintainImgUrl?apiUrl.imgUrl+item.maintainImgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div style="line-height: 30px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;height: 30px;background: #f3f3f3;border-radius: 4px;">
                {{ item.maintainImgDescribe }}
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">备注</td>
        <td colspan="5" style="min-height:50px;padding:5px 10px;">{{!!formData.maintainRemark ? formData.maintainRemark : '--'}}</td>
      </tr>
      </tbody>
    </table>


    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
  import vehicleBriefly from "./vehicleBriefly";

  export default {
    props: ["selectData"],
    components: {
      vehicleBriefly,//车辆简述
    },
    data() {
      return {
        spinShow:false,//本页加载
        vehicleBrieflyData: null,//车辆简述
        formData: {},
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;

      that.spinShow = true;
      that.axios.post(that.apiUrl.webApi + "/management/maintain/maintainInfo",{uuid:that.selectData.uuid}).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.formData = res.data.data;
          //车辆简述
          that.vehicleBrieflyData = { // 1 车辆  2 挂车
            modelType: 1,
            value: that.formData.refVehicleUuid
          };
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    methods: {//执行的方法

      printTest() {
        this.$print(this.$refs.maintenanceSee) // 使用
      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_maintenanceSee {
    input,.ivu-select-selection{
      border:0px;
    }
    .ivu-icon{
      display: none;
    }


    >table {
      table-layout:fixed;
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px !important;

      td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border: 1px solid #515a6e;
        padding: 0 10px;
        word-break: break-word;
      }
    }

    .demo-upload-list {
      margin: 5px auto;
      width: 195px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 0 0 0;

      img {
        min-height: 30%;
        max-height: 90%;
        min-width: 30%;
        max-width: 90%;
        //width: 100%;
        //height: 100%;
      }
    }
  }

</style>
